/**
 *  学习目标：Todos 案例
 */
import React, { useState } from 'react'

export default function App() {
  const [list, setList] = useState([
    { id: 1, content: '吃饭', done: true },
    { id: 2, content: '睡觉', done: false },
    { id: 3, content: '游戏', done: false },
    { id: 4, content: '代码', done: true },
    { id: 5, content: '抖音', done: true },
    { id: 6, content: '视频', done: true },
  ])
  const [type, setType] = useState('all')
  // 传入类型
  const typeHandle = (type) => {
    console.log(type)
    setType(type)
  }
  // 根据id进行删除
  const HanderDetClick = (id) => {
    console.log('点击了id', id)
    setList(list.filter((v) => v.id !== id))
  }
  // 根据勾选完成状态
  const HandleByidUpdate = (id) => {
    console.log(id)
    const newList = list.map((item) => {
      if (item.id === id) {
        return {
          ...item,
          done: !item.done,
        }
      } else {
        return item
      }
    })
    setList(newList)
  }
  // 清除已完成的状态
  const clearHandle = () => {
    setList(list.filter((v) => v.done !== true))
  }
  // 添加事件
  const handleAddTodo = (content) => {
    setList([{ id: new Date(), content: content, done: false }, ...list])
  }
  // 全选和非全选
  const checkallHandle = (check) => {
    setList(
      list.map((item) => {
        return {
          ...item,
          done: check,
        }
      })
    )
  }
  return (
    <section className='todoapp'>
      {/* 头部 */}
      <Header handleAddTodo={handleAddTodo} />
      {/* 主体 */}
      <Content type={type} list={list} HanderDetClick={HanderDetClick} HandleByidUpdate={HandleByidUpdate} checkallHandle={checkallHandle} />
      {/* 底部 */}
      <Footer list={list} clearHandle={clearHandle} type={type} typeHandle={typeHandle} />
    </section>
  )
}

function Header({ handleAddTodo }) {
  const [content, setContent] = useState('')
  const onKeyUp = (e) => {
    if (e.key === 'Enter') {
      // console.log('添加事件')
      if (content.trim() === '') return alert('请输入内容')
      handleAddTodo(content)
      setContent('')
    } else if (e.key === 'Escape') {
      setContent('')
    }
  }
  return (
    <header className='header'>
      <h1>todos</h1>
      <input onKeyUp={onKeyUp} value={content} onChange={(e) => setContent(e.target.value)} className='new-todo' placeholder='What needs to be done?' autoFocus />
    </header>
  )
}

function Content({ type, list, HanderDetClick, HandleByidUpdate, checkallHandle }) {
  let isShowList = list
  if (type === 'active') {
    isShowList = list.filter((v) => !v.done)
  } else if (type === 'completed') {
    isShowList = list.filter((v) => v.done)
  }
  // 计算全选状态
  // every，如果数组为空的话为true
  const checkAll = list.length !== 0 && list.every((v) => v.done)
  return (
    <section className='main'>
      <input className='toggle-all' id='toggle-all' checked={checkAll} onChange={() => checkallHandle(!checkAll)} type='checkbox' />
      <label htmlFor='toggle-all'>Mark all as complete</label>
      <ul className='todo-list'>
        {isShowList.map((item) => (
          <li key={item.id} className={item.done ? 'completed' : ''}>
            <div className='view'>
              <input className='toggle' type='checkbox' checked={item.done} onChange={() => HandleByidUpdate(item.id)} />
              <label>{item.content}</label>
              <button onClick={() => HanderDetClick(item.id)} className='destroy'></button>
            </div>
            <input className='edit' />
          </li>
        ))}
      </ul>
    </section>
  )
}

function Footer({ clearHandle, list, type, typeHandle }) {
  // const leftCount = list.filter((v) => !v.done).length
  return (
    <footer className='footer'>
      <span className='todo-count'>
        <strong>{list.filter((v) => !v.done).length}</strong> item left
      </span>
      <ul className='filters'>
        <li>
          <a onClick={() => typeHandle('all')} className={type === 'all' ? 'selected' : ''} href='#/'>
            All
          </a>
        </li>
        <li>
          <a onClick={() => typeHandle('active')} className={type === 'active' ? 'selected' : ''} href='#/active'>
            Active
          </a>
        </li>
        <li>
          <a onClick={() => typeHandle('completed')} className={type === 'completed' ? 'selected' : ''} href='#/completed'>
            Completed
          </a>
        </li>
      </ul>
      <button className='clear-completed' onClick={clearHandle}>
        Clear completed
      </button>
    </footer>
  )
}
